<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>基于vue-router的案例</title>
		<style type="text/css">
			html,
			body,
			#app {
				margin: 0;
				padding: 0px;
				height: 100%;
			}
			.header {
				height: 50px;
				background-color: #545c64;
				line-height: 50px;
				text-align: center;
				font-size: 24px;
				color: #fff;
			}
			.footer {
				height: 40px;
				line-height: 40px;
				background-color: #888;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				color: #fff;
			}
			.main {
				display: flex;
				position: absolute;
				top: 50px;
				bottom: 40px;
				width: 100%;
			}
			.content {
				flex: 1;
				text-align: center;
				height: 100%;
			}
			.left {
				flex: 0 0 20%;
				background-color: #545c64;
			}
			.left a {
				color: white;
				text-decoration: none;
			}
			.right {
				margin: 5px;
			}
			.btns {
				width: 100%;
				height: 35px;
				line-height: 35px;
				background-color: #f5f5f5;
				text-align: left;
				padding-left: 10px;
				box-sizing: border-box;
			}
			button {
				height: 30px;
				background-color: #ecf5ff;
				border: 1px solid lightskyblue;
				font-size: 12px;
				padding: 0 20px;
			}
			.main-content {
				margin-top: 10px;
			}
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul li {
				height: 45px;
				line-height: 45px;
				background-color: #a0a0a0;
				color: #fff;
				cursor: pointer;
				border-bottom: 1px solid #fff;
			}

			table {
				width: 100%;
				border-collapse: collapse;
			}

			td,
			th {
				border: 1px solid #eee;
				line-height: 35px;
				font-size: 12px;
			}

			th {
				background-color: #ddd;
			}
		</style>
		<script src="./scripts/vue.js"></script>
		<script src="./scripts/vue-router_3.0.2.js"></script>
	</head>
	<body>
		<!-- 要被 vue 实例所控制的区域 -->
		<div id="app">
			<!-- 创建路由占位符 -->
			<router-view></router-view>
		</div>

		<script>
			// 将页面结构抽取成根组件
			var App = {
				template: `
        <div>
          <!-- 头部区域 -->
          <header class="header">传智后台管理系统</header>
          <!-- 中间主体区域 -->
          <div class="main">
            <!-- 左侧菜单栏 -->
            <div class="content left">
              <ul>
                <li><router-link to="/users">用户管理</router-link></li>
                <li><router-link to="/rights">权限管理</router-link></li>
                <li><router-link to="/goods">商品管理</router-link></li>
                <li><router-link to="/orders">订单管理</router-link></li>
                <li><router-link to="/settings">系统设置</router-link></li>
              </ul>
            </div>
            <!-- 右侧内容区域 -->
            <div class="content right">
              <div class="main-content">
                <router-view />
              </div>
            </div>
          </div>
          <!-- 尾部区域 -->
          <footer class="footer">版权信息</footer>
        </div>
        `
			}

			var Users = {
				data() {
					return {
						userList: [
							{ id: 1, name: '张三', age: 10 },
							{ id: 2, name: '李四', age: 20 },
							{ id: 3, name: '王五', age: 30 },
							{ id: 4, name: '赵六', age: 40 }
						]
					}
				},
				template: `
          <div>
            <h3>用户管理</h3>
            <table>
		      		<thead>
		      			<tr>
		      				<th>编号</th>
		      				<th>姓名</th>
		      				<th>年龄</th>
		      				<th>操作</th>
		      			</tr>
		      		</thead>
		      		<tbody>
		      			<tr v-for="item in userList" :key="item.id">
		      				<td>{{ item.id }}</td>
		      				<td>{{ item.name }}</td>
		      				<td>{{ item.age }}</td>
		      				<td>
                    <!-- 方法1：编程式导航 -->
		      					<!-- <a href="" @click.prevent="goDetail(item.id)">详情</a> -->
                    <!-- 方法2：声明式导航 -->
                    <router-link :to="{ name: 'UserInfo', params: { id: item.id } }">详情<router-link>
          				</td>
		      			</tr>
		      		</tbody>
		      	</table>
          </div>
        `,
				methods: {
					goDetail(id) {
						this.$router.push(`/userinfo/${id}`)
					}
				}
			}
			var UserInfo = {
				template: `
          <div>
            <h5>用户详情页 --- 用户Id为：{{ $route.params.id }}</h5>
            <button @click="goBack()">后退</button>
          </div>
        `,
				methods: {
					// 实现后退功能
					goBack() {
						this.$router.go(-1)
					}
				}
			}
			var Rights = {
				template: `
          <h3>权限管理</h3>
        `
			}
			var Goods = {
				template: `
          <h3>商品管理</h3>
        `
			}
			var Orders = {
				template: `
          <h3>订单管理</h3>
        `
			}
			var Settings = {
				template: `
          <h3>系统设置</h3>
        `
			}

			// 创建 Vue-router 实例
			var router = new VueRouter({
				routes: [
					{
						path: '/',
						component: App,
						redirect: '/users', // 重定向
						children: [
							// 标准路由写法：直接写 子路由的名称即可,不需要加斜线
							{ path: 'users', component: Users },
							{ path: 'userinfo/:id', component: UserInfo, name: 'UserInfo' },
							{ path: 'rights', component: Rights },
							{ path: 'goods', component: Goods },
							{ path: 'orders', component: Orders },
							{ path: 'settings', component: Settings }
						]
					}
				]
			})

			var vm = new Vue({
				el: '#app',
				router
			})
		</script>
	</body>
</html>
